import React from 'react';

/* 引入路由 */
import { Switch, Route, Redirect } from 'react-router-dom';

/* 引入类型文件 */
import { IRouterItem } from '../utils/interface';

/* 引入上下文 */
import useStore from '../context/useStore';

/* 引入获取token方法 */
import { getToken } from '../utils/index';

/* 类型 */
interface IProps {
    routes: IRouterItem[]
};

/* 定义白名单 */
const whiteList = ['/login', '/403', '/404', '/home'];

/* 封装 路由组件*/
const RouterView: React.FC<IProps> = (props) => {
    /* console.log('routerview...', props); */

    let { user } = useStore();

    return <Switch>{
        props.routes.map((item) => {
            /* 判断是否存在路由重定向 */
            if (item.redirect) {
                return <Redirect key={item.path} from={item.path} to={item.redirect}></Redirect>
            }

            /* 渲染路由 */
            return <Route path={item.path} key={item.path} render={routeProps => {
                /* console.log('routeProps...', routeProps); */

                /* 导航守卫  1.登录拦截 */

                /* 保存路由路径 */
                let path = routeProps.match.path;

                /* 判断请求路径是否存在于白名单，并且是否有token  encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。 */
                if (!whiteList.includes(path) && !getToken()) {
                    /* 重定向 */
                    routeProps.history.replace(`/login?redirect=${encodeURIComponent(path)}`)
                };

                /* 2.获取用户信息 */
                if (!Object.keys(user.userInfo).length) {
                    user.getUserInfoAction();
                };

                /* 判断是否存在子级路由 */
                if (item.children) {
                    return <item.component routes={item.children} {...routeProps} meta={item.meta}></item.component>
                } else {
                    return <item.component {...routeProps} meta={item.meta}></item.component>
                }
            }}></Route>
        })  
    }</Switch>
}

export default RouterView;